<template>
  <div class="app-container">
    <el-form :inline="true" @submit.native.prevent>
      <el-form-item>
        <el-button
          type="primary"
          @click="showMap"
        >{{ $t('map') }}
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="localLists"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" class="demo-table-expand">
            <el-form-item :label="$t('lat')">
              <span>{{ props.row.lat }}</span>
            </el-form-item>
            <el-form-item :label="$t('lng')">
              <span>{{ props.row.lng }}</span>
            </el-form-item>
            <el-form-item :label="$t('radius')">
              <span>{{ props.row.radius }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="address" :label="$t('address')"/>
      <el-table-column prop="type" :label="$t('type')" :formatter="formatLocationType"/>
      <el-table-column prop="updateDate" :label="$t('time')" sortable width="220">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span style="margin-left: 13px">{{ formatDate(scope.row.timestamp) }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="devModel" width="80" :label="$t('function')">
        <template slot-scope="scope">
          <el-button
            style="color: #f56c6c"
            type="text"
            icon="el-icon-delete"
            @click="del(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 15px 0;text-align: right">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-sizes="[20,30,50]"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      :visible.sync="mapVisible"
      destroy-on-close
      width="1200px"
      top="15px"
    >
      <local-map
        style="width: 100%"
        :device-core="deviceCore"
      />
    </el-dialog>
  </div>
</template>

<script>
import LocalMap from './components/LocalMap'

import { cancelNotice, formatDate, formatLocationType } from '@/util/common'
import { deleteDeviceLocal, pageGetDeviceLocal } from '@/api/iot/iotDeviceLocalApi'
import { getPageSize, setPageSize } from '@/util/storage'

export default {
  name: 'DeviceLocal',
  components: {
    LocalMap
  },
  data() {
    return {
      localLists: [],
      currentPage: 0,
      total: 0,
      pageSize: getPageSize(),
      deviceCore: null,
      deviceName: null,
      mapVisible: false
    }
  },
  mounted() {
    const param = this.$route.query
    this.deviceCore = param.deviceCore
    this.deviceName = param.deviceName
    this.pageGetDeviceLocal()
    this.setTagsViewTitle()
  },
  methods: {
    showMap() {
      this.mapVisible = true
    },
    formatLocationType(item) {
      return formatLocationType(this, item.type)
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    setTagsViewTitle() {
      this.tempRoute = Object.assign({}, this.$route)
      const route = Object.assign({}, this.tempRoute, {
        title: `${this.deviceName}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    handleSizeChange(val) {
      this.pageSize = val
      setPageSize(this.pageSize)
      this.pageGetDeviceLocal()
    },
    handleCurrentChange(item) {
      this.currentPage = item
      this.pageGetDeviceLocal()
    },
    del(index) {
      const that = this
      this.$confirm(this.$t('deletePrompt'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteDeviceLocal({
            localId: index.localId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              that.pageGetDeviceLocal()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    pageGetDeviceLocal() {
      pageGetDeviceLocal({
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        deviceCore: this.deviceCore
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.total = data.total
          this.localLists = data.data
        }
      })
    }
  }
}
</script>
